<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById('root'))

    class App extends React.Component {
        constructor(props) {
            super();
            this.state = {
                list: [
                    {
                        id: 111, name: "why", score: 99
                    },
                    {
                        id: 112, name: "kobe", score: 98
                    },
                    {
                        id: 113, name: "james", score: 199
                    },
                    {
                        id: 114, name: "curry", score: 188
                    },
                    {
                        id: 114, name: "sundy", score: 101
                    }
                ]
            }
        }

        render() {
            const { list } = this.state;
            const keys = Object.keys(list[0]);
            return (
                <div>
                    <h1>列表渲染</h1>
                    <h2>所有学生</h2>
                    <table>
                        <thead>
                            <tr style={{width:'50pxz'}}>
                                {keys.map(k => <th key={k}>{k}</th>)}
                            </tr>
                        </thead>
                        <tbody>
                        {
                            list.map(item =>
                                <tr key={item.id}>
                                    {keys.map(k => <td key={k}>{item[k]}</td>)}
                                </tr>
                            )
                        }
                        </tbody>
                    </table>

                    <h2>分数大于100的任意两个人</h2>
                    <table>
                        <thead>
                        <tr style={{width:'50pxz'}}>
                            {keys.map(k => <th key={k}>{k}</th>)}
                        </tr>
                        </thead>
                        <tbody>
                        {
                            list.filter(item => item.score > 100)
                                .slice(1, 3)
                                .map(item =>
                                <tr key={item.id}>
                                    {keys.map(k => <td key={k}>{item[k]}</td>)}
                                </tr>
                            )
                        }
                        </tbody>
                    </table>
                </div>
            );
        }
    }

    root.render(<App/>);
</script>
</body>
</html>